<!--代码逻辑和样式库-->
<script src="./permission-setting.component.js"></script>
<style src="./permission-setting.scss" scoped lang="scss"></style>

<template>
  <div>
    <el-dialog :visible.sync="showDialog" width="1300px" @close="closeDialog()">
      <span slot="title">
        <span class="aq-text-weight-bolder">职位管理</span>
        <i class="aq-margin-left-12 aq-margin-right-12 el-icon-arrow-right"></i>
        {{ title }}
      </span>
      <div class="aq-padding-top-16 aq-padding-bottom-16">
        <span>{{ roleName }}</span>
        <span class="aq-search-text">下方为平台菜单列表，请选择该职位可以查询修改的数据权限以及菜单中可使用的操作权限</span>
      </div>
      <el-form ref="dataForm" :model="editForm" label-position="top" label-width="90px">
        <!-- <el-tabs v-model="activeNavName" type="card" @tab-click="handleClick">
          <el-tab-pane v-for="(radio, idx) of topNavList" :key="idx" :label="radio.name" :name="radio.objectId"></el-tab-pane>
        </el-tabs> -->
        <el-table :data="treeData" row-key="objectId" border highlight-current-row :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="name" label="模块名称" />
          <el-table-column label="数据权限">
            <template slot="header">
              <span class="aq-padding-right-8">数据权限</span>
              <el-checkbox v-model="editForm.isAllDataCheck" @change="allDataChange()">全数据权限</el-checkbox>
            </template>
            <template slot-scope="scope">
              <el-cascader v-if="scope.row.isAuthenticate" separator="-" class="aq-width-full" :collapse-tags="true" v-model="scope.row['roleStructPermissionIdsOfCascader']" :options="structuresTreeData" :props="defaultProps" ref="cascader"></el-cascader>
            </template>
          </el-table-column>
          <el-table-column prop="path" label="操作">
            <template slot="header">
              <span class="aq-padding-right-8">操作权限</span>
              <el-checkbox v-model="editForm.isAllOperationCheck" @change="allOperationChange()">全数据权限</el-checkbox>
            </template>
            <template slot-scope="scope">
              <el-form-item>
                <el-checkbox v-if="scope.row.pid === '0'" :indeterminate="scope.row.isIndeterminate" v-model="scope.row.checkAll" @change="handleCheckAllChange(scope.row)">全选</el-checkbox>
                <div v-if="scope.row.pid !== '0'">
                  <el-checkbox class="aq-margin-top-12 aq-margin-bottom-12" v-for="item in scope.row.permissions" v-model="item.checkFlag" :label="item.objectId" :value="item.objectId" :key="item.objectId" @change="handleCheckOneChange(scope.row, item.checkFlag)">{{ item.name }}</el-checkbox>
                </div>
                <!--<el-checkbox-group v-if="scope.row.pid !== '0'" v-model="scope.row['dataChecks']" @change="handleCheckOneChange">
                  <el-checkbox class="aq-margin-top-12 aq-margin-bottom-12" v-for="item in scope.row.permissions" :label="item.objectId" :value="item.objectId" :key="item.objectId" :checked="item.checkFlag">{{ item.name }}</el-checkbox>
                </el-checkbox-group>-->
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="save()">保存</el-button>
        <el-button @click="showDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
